<template>
	<div class="app-container">
		<el-form
			v-show="showSearch"
			ref="queryFormRef"
			:inline="true"
			:model="queryParams"
			label-width="70px"
		>
			<el-form-item label="参数名称" prop="configName">
				<el-input
					v-model="queryParams.configName"
					clearable
					placeholder="请输入参数名称"
					style="width: 240px"
					@change="handleQuery()"
					@keyup.enter.native="handleQuery()"
				/>
			</el-form-item>
			<el-form-item label="参数键名" prop="configKey">
				<el-input
					v-model="queryParams.configKey"
					clearable
					placeholder="请输入参数键名"
					style="width: 240px"
					@change="handleQuery()"
					@keyup.enter.native="handleQuery()"
				/>
			</el-form-item>
			<el-form-item label="系统内置" prop="configType">
				<el-select
					v-model="queryParams.configType"
					clearable
					placeholder="请选择"
					style="width: 240px"
					@change="handleQuery()"
				>
					<el-option
						v-for="dict in typeOptions"
						:key="dict.dictValue"
						:label="dict.dictLabel"
						:value="dict.dictValue"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间" style="font-weight: bold">
				<el-date-picker
					v-model="dateRange"
					end-placeholder="结束日期"
					format="YYYY-MM-DD"
					range-separator="-"
					start-placeholder="开始日期"
					style="width: 240px"
					type="daterange"
					value-format="YYYY-MM-DD"
					@change="handleQuery()"
				></el-date-picker>
			</el-form-item>
			<!-- prettier-ignore -->
			<form-search @reset="resetQuery()" @search="handleQuery()" />
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					v-hasPermi="['system:config:add']"
					icon="plus"
					plain
					size="small"
					type="primary"
					@click="handleAdd"
				>新增
				</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPermi="['system:config:export']"
					icon="download"
					plain
					size="small"
					type="warning"
					@click="handleExport"
				>导出
				</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPermi="['system:config:remove']"
					icon="refresh"
					plain
					size="small"
					type="danger"
					@click="handleClearCache"
				>清理缓存
				</el-button
				>
			</el-col>
			<el-col v-if="!single" :span="1.5">
				<el-button
					v-hasPermi="['system:config:edit']"
					:disabled="single"
					icon="edit"
					plain
					size="small"
					type="success"
					@click="handleUpdate"
				>修改
				</el-button
				>
			</el-col>
			<el-col v-if="!multiple" :span="1.5">
				<el-button
					v-hasPermi="['system:config:remove']"
					:disabled="multiple"
					icon="delete"
					plain
					size="small"
					type="danger"
					@click="handleDelete"
				>删除
				</el-button
				>
			</el-col>
			<!-- prettier-ignore -->
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList()" />
		</el-row>

		<el-table
			ref="pageTableRef"
			v-loading="loading"
			:data="configList"
			height="560px"
			@selection-change="handleSelectionChange"
		>
			<el-table-column align="center" type="selection" width="55" />
			<el-table-column
				:show-overflow-tooltip="true"
				align="center"
				label="参数名称"
				prop="configName"
				width="300"
			/>
			<el-table-column
				:show-overflow-tooltip="true"
				align="center"
				label="参数键名"
				prop="configKey"
				width="200"
			/>
			<el-table-column
				align="center"
				label="参数键值"
				prop="configValue"
				width="200"
			/>
			<el-table-column
				:formatter="typeFormat"
				align="center"
				label="系统内置"
				prop="configType"
				width="150"
			/>
			<el-table-column
				:show-overflow-tooltip="true"
				align="center"
				label="备注"
				prop="remark"
			/>
			<el-table-column
				align="center"
				label="创建时间"
				prop="createTime"
				width="200"
			>
				<template #default="scope">
					<span>{{ dateTimeSub(scope.row.createTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				class-name="small-padding fixed-width"
				label="操作"
				width="200"
			>
				<template #default="scope">
					<el-link
						v-hasPermi="['system:config:edit']"
						:underline="false"
						class="table_link_btn"
						icon="edit"
						type="primary"
						@click="handleUpdate(scope.row)"
					><span class="table_link_text">修改</span></el-link
					>
					<el-link
						v-hasPermi="['system:config:remove']"
						:underline="false"
						class="table_link_btn"
						icon="delete"
						size="small"
						type="danger"
						@click="handleDelete(scope.row)"
					><span class="table_link_text">删除</span></el-link
					>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total > 0"
			v-model:limit="queryParams.pageSize"
			v-model:page="queryParams.pageNum"
			:total="total"
			@pagination="getList()"
		/>

		<!-- 添加或修改参数配置对话框 -->
		<el-dialog
			v-model="open"
			:title="title"
			append-to-body
			width="30%"
			@close="cleanSelect()"
		>
			<el-form
				ref="formRef"
				:model="form"
				:rules="rules"
				label-width="80px"
			>
				<el-form-item label="参数名称" prop="configName">
					<el-input
						v-model="form.configName"
						placeholder="请输入参数名称"
					/>
				</el-form-item>
				<el-form-item label="参数键名" prop="configKey">
					<el-input
						v-model="form.configKey"
						placeholder="请输入参数键名"
					/>
				</el-form-item>
				<el-form-item label="参数键值" prop="configValue">
					<el-input
						v-model="form.configValue"
						placeholder="请输入参数键值"
					/>
				</el-form-item>
				<el-form-item label="系统内置" prop="configType">
					<el-radio-group v-model="form.configType">
						<el-radio
							v-for="dict in typeOptions"
							:key="dict.dictValue"
							:label="dict.dictValue"
						>{{ dict.dictLabel }}
						</el-radio
						>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input
						v-model="form.remark"
						placeholder="请输入内容"
						type="textarea"
					/>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<!-- prettier-ignore -->
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="Config" setup>
import Config from "@/api/request/system/config";
// prettier-ignore
const {
	loading,
	single,
	multiple,
	open,
	showSearch,
	total,
	configList,
	title,
	typeOptions,
	dateRange,
	queryParams,
	queryFormRef,
	form,
	formRef,
	rules,
	getList,
	typeFormat,
	cancel,
	handleQuery,
	resetQuery,
	handleAdd,
	handleSelectionChange,
	handleUpdate,
	submitForm,
	handleDelete,
	handleExport,
	handleClearCache,
	pageTableRef,
	cleanSelect,
} = Config();
</script>
